<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="8">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="推荐类别">
            <el-select v-model="form.region" placeholder="请选择类别" style="width:450px">
              <el-option label="网络正能量内容创作(含账号)" value="0"></el-option>
              <el-option label="网络正能量传播者（含账号和平台）" value="1"></el-option>
              <el-option label="网络空间的正能量公众人物" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="作品链接" prop="link">
            <el-input
              placeholder="https://"
              v-model="form.link"
              maxlength="200"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="首发平台" prop="platform">
            <el-input
              placeholder="请输入首发平台具体名称"
              v-model="form.platform"
              maxlength="20"
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="作者简介" prop="author">
            <el-input
              type="textarea"
              placeholder="请输入作者简介(不超过50字)"
              v-model="form.author"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="作品简介" prop="intro">
            <el-input
              type="textarea"
              placeholder="请输入作品简介(不超过50字)"
              v-model="form.intro"
              maxlength="50"
              show-word-limit
            >
            </el-input>
          </el-form-item>
          <el-form-item label="社会效果" prop="effect">
            <el-input
              type="textarea"
              placeholder="请输入社会效果(不超过50字)"
              v-model="form.effect"
              maxlength="50"
              show-word-limit
              clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="单位意见" prop="view">
            <el-input
              type="textarea"
              placeholder="请输入单位意见(不超过50字)"
              v-model="form.view"
              maxlength="50"
              show-word-limit
              clearable>
            </el-input>
          </el-form-item>

          <el-form-item>
            <el-button>上一步</el-button>
            <el-button type="primary" @click="onSubmit">下一步</el-button>
          </el-form-item>
        </el-form>

      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Article',
  data () {
    return {
      tableId: '',
      form: {
        type: '',
        region: '',
        link: '',
        platform: '',
        author: '',
        intro: '',
        effect: '',
        view: ''
      },
      rules: {
        link: [
          { required: true, message: '请输入首发平台名称', trigger: 'blur' },
          { max: 100, message: '最大长度为100', trigger: 'blur' },
          // eslint-disable-next-line no-useless-escape
          { pattern: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\*\+,;=.]+$/, message: '请输入正确的网络链接' }
        ],
        platform: [
          { required: true, message: '请输入首发平台名称', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者简介', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        intro: [
          { required: true, message: '请输入作品简介', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        effect: [
          { required: true, message: '请输入社会效果', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        view: [
          { required: true, message: '请输入单位意见', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ]
      },
      pstatus: 1
    }
  },
  created: function () {
    this.createArticle()
  },
  methods: {
    onSubmit: function () {
      this.$axios.post('/article', {id: this.tableId,
        recomType: this.form.region,
        workUrl: this.form.link,
        platform: this.form.platform,
        authorIntro: this.form.author,
        workIntro: this.form.intro,
        effect: this.form.effect,
        opinion: this.form.view,
        pstatus: this.pstatus})
      // console.info(this.$axios.get('api/animeVedio', {params: {id: 13}}))
    },
    createArticle: function () {
      // 页面创建时获取上个页面路由传过来的ID值
      this.tableId = this.$route.params.id
    }
  }
}
</script>

<style scoped>

</style>
